<template>
	<div style="">
		<div style="margin-top: 3.2rem;"></div>
		<top-nav bgColor="white" title="修改密码"   :rightShow="true" returnPath="上一级"></top-nav>
		<section  class="changePwd-sec">
			<input type="password" v-model="password" placeholder="请输入原密码" />
			<input type="password" v-model="newPassword" placeholder="请输入新密码" />
			<input type="password" v-model="ckPassword" placeholder="请再次输入密码" />
			<mu-flat-button @click="check" class="mu-changeBtn" labelClass="mu-label" label="确认" /></mu-flat-button>
		</section>
		<mu-toast v-if="toast" :message="message" />
	</div>
</template>
<script>
export default {

    data () {
      return {
       toast:false,
       password:'',
       ckPassword:'',
       newPassword:'',
       valdate:false,
       valdateMsg:'',
       name:'',
       userNumber:''
      }
    },
    mounted(){
//  	this.passwordCheck('123')
    },
    computed:{
		url(){
			return `${this.$store.state.schoolUrl}/Login/PasswordModify`
		}
		},
    methods: {
    	showToast (msg) {
	        this.message = msg
	        this.toast = true
	        if (this.toastTimer) clearTimeout(this.toastTimer)
	        this.toastTimer = setTimeout(() => { this.toast = false }, 1500)
	    },
      	check(){
      		let that = this
          if(that.newPassword.length>=6&&that.newPassword.length<=20){
          
            if(that.ckPassword==that.newPassword){
            	var patrn=/^(\w){1,20}$/
            	if(patrn.exec(that.newPassword)){
            		that.axios.post(that.url,
            		{
            			'id':that.$store.state.userInfo.studentSchoolId,
    					'oldPassword':that.password,
    					'newPassword':that.newPassword
            		}
            		).then(function (response) {
	                  if(response.data.info=='success'){
	                  		that.$parent.showToast('修改密码成功')
	                  }else{
	                  		that.$parent.showToast('原密码错误')
	                  }
	      	        }).catch(function(r){
	      	        	that.$parent.showToast('修改密码失败')
	      	        })
            	}else{
            		that.$parent.showToast("请输入字母、数字或下划线") 
            	}
          		
            }else{
              that.$parent.showToast("确认密码与新密码不一致")
            }
          }else if(that.newPassword.length>20){
          		that.$parent.showToast("密码长度不能超过20位字符")
          }else if(that.newPassword.length<6){
              that.$parent.showToast("密码长度请大于6位字符")
          }
      	},
      	goBack(){
	     	this.$router.go(-1)
	     }
//	    passwordCheck(val){
//	    	var patrn=/^(\w){1,20}$/;  
//			if(!(patrn.exec(val))){
//				this.$parent.showToast("请输入字母、数字或下划线")
//			}
//	    }
    },watch:{
      newPassword:function(val,oldVal){
        if(val.length<6){
          this.valdateMsg='密码长度应大于6位字符'
        }else if(val.length>=6&&val.length<=20){
        	
        }else if(val.length>20){
        	this.valdateMsg='密码长度不能超过20位字符'
        }
      },
      ckPassword:function(val,oldVal) {
         if(val != this.newPassword){
          this.valdateMsg='确认密码与新密码不一致'
        }
      }
    }
}
</script>
<style scoped>
 .changePwd-sec{
 	margin: 6rem auto;
 	width: 94%;
 }
 .changePwd-sec input{
 	border: none;
 	outline: none;
 	background-color: #fff;
 	width: 100%;
 	height: 3rem;
 	border-radius: 3px;
 	border: 1px solid #c4c4c4;
 	margin-bottom: 1.8rem;
 	text-indent: 1rem;
 	font-size: 1rem;
 }
 .mu-changeBtn{
 	color: white !important;
	border-radius: 3px !important;
	height: 3rem !important;
	background-color: #3399fe !important;
	width: 100%;
 }
</style>